  <template>

      <div class="full-screen-border">
        <div class="top">
          <div class="avatar"></div>
            <div class="username">{{userStore.username}}</div>
              <div class="currency">
                <div class="currency-img"></div>
                <div class="currency-amount">{{userGoldCoins}}</div>
                  </div>
                  <div class="top-activity">
                    <div class="top-activity-one"></div>
                    <div class="top-activity-two"> </div>
                    <div class="top-activity-three"></div>
                  </div>  
        </div>
        <div class="content">
          <div class="content-left" >
            <div class="content-left-activity">
              <div class="content-left-activity-one">活动1</div>
              <div class="content-left-activity-two">活动2</div>
              <div class="content-left-activity-three">活动3</div>
            </div>
          </div>
          <div class="content-miden">
            <div class="content-miden-option"@click="hand1"></div>
          </div>
        </div>
        <div class="Bottom">
          <div class="setup"></div>
          <div class="backpack"></div>
          <div class="email"></div>
          <div class="shop"></div>
        </div>
      </div>
    
    
    </template>
    
    <script setup>
    import {useRouter} from 'vue-router'
    import { useUserStore } from '@/store/userstore'
    import axios from 'axios'
import { onMounted,ref } from 'vue'

    const userStore = useUserStore()
    console.log(userStore.username) // 输出: JohnDoe
    console.log(userStore.id) // 输出: JohnDoe
    const userGoldCoins = ref(null); // 用于存储用户的金币数量
    userGoldCoins.value = 0; // 初始化金币数量为0
    console.log(userGoldCoins.value) // 输出: 0 
    const router =useRouter()
    const hand1 = () => {
      router.push('/battle')
    }
    onMounted(async() => {
      const response = await axios.get(`http://localhost:8080/api/game/userInformation?id=${userStore.id}`);
      userGoldCoins.value = response.data.goldCoins; // 假设返回的数据结构中有 goldCoins 字段
      console.log(response.data.goldCoins)
    });
    </script>
    
    <style scoped>
      
    
        /* 全屏边框容器 */
        .full-screen-border {
          display: flex;            /* 启用 Flex 布局 */
          flex-direction: column;   /* 垂直排列子元素 */
            /* justify-content: center;垂直居中内容 */
          align-items: center;      /* 水平居中内容 */
          width: 100vw;             /* 视口宽度 */
          height: 100vh;            /* 视口高度 */
          border: 3px solid black; /* 边框样式 */
            /* position: relative;定位基准 */
          
    
                /* 背景图设置 */
          background-image: url('src/assets/background.jpg'); /* 替换为你的图片路径 */
          background-size: cover; /* 覆盖整个容器 */
          background-position: center; /* 居中显示 */
          background-repeat: no-repeat; /* 禁止重复 */
        } 
    
    
        .top{
          display: flex;            /* 启用 Flex 布局 */
          justify-content: flex-start;
          width: 100vw;             /* 视口宽度 */
          height: 10vh;            /* 视口高度 */
          border: 3px solid black; /* 边框样式 */
          align-items: flex-start;
          background-color: rgb(124, 119, 119,0.5);
          background: linear-gradient(
            to right, 
            rgba(165, 161, 161, 0.5) 0%,    /* 左侧50%不透明黑色 */
            rgba(226, 221, 221, 0) 100%    /* 右侧完全透明 */
          );
          
        }.top-activity{
          display: flex;
          width: 100%;
          height: 100%;
          border: 3px solid white;
          align-items: flex-start;
          
          
        }.top-activity-one{
          width: 13%;
          height: 100%;
          border: 3px solid white;
        }.top-activity-two{
          width: 13%;
          height: 100%;
          border: 3px solid white;
        }.top-activity-three{
          width: 13%;
          height: 100%;
          border: 3px solid white;
        }
        .avatar{
          width: 6%;
          height: 90%;
          border-radius: 50%;
          /*margin-top: 2vh;*/
          background-image: url('src/assets/user.png');
          background-size: cover;
          background-position: center;
          border: 3px solid rgb(28, 16, 16); /* 边框样式 */
        }.username{
          width: 10%;
          height: 100%;
          border: 3px solid rgb(28, 16, 16); /* 边框样式 */
        }.currency{
          display: flex;
          align-items: flex-end; /* 关键：交叉轴底部对齐 */
          width: 13%;
          height: 40%;
          border: 3px solid rgb(28, 16, 16); /* 边框样式 */
          border-radius: 100px ;
          margin-top: 2vh; 
        }.currency-img{
          width: 25%;
          height: 115%;
          border-radius: 50%;
          background-image: url('src/assets/jinbi.png');
          border: 3px solid rgb(28, 16, 16); /* 边框样式 */
          background-size: cover;
          background-position: center;
          
        }.currency-amount{
          color:white
        }
            /* 内部内容区域 */
        .content {
          display: flex;            /* 启用 Flex 布局 */
          width: 100vw;             /* 视口宽度 */
          height: 70vh;            /* 视口高度 */
          border: 3px solid rgb(192, 176, 176); /* 边框样式 */
        }.content-left{
          width: 10%;          /* 继承外层容器的100%宽度 */
          height: 100%;         /* 继承外层容器的100%高度 */

        }.content-left-activity{
          width: 60%;
          height: 100%;
          display: flex;
          flex-direction: column;
          margin-left: 10%;
          
        }.content-left-activity-one{
          width: 100%;
          height: 20%;
          border: 3px solid white;
        }.content-left-activity-two{
          width: 100%;
          height: 20%;
          border: 3px solid white;
        }.content-left-activity-three{
          width: 100%;
          height: 20%;
          border: 3px solid white;
        }
        .content-miden{
          width: 80%;          /* 继承外层容器的100%宽度 */
          height: 100%;         /* 继承外层容器的100%高度 */
          border: 3px solid rgb(19, 7, 7); /* 边框样式 */
          position: relative;
          

        }.content-miden-option{
          width: 15%;
          height: 70%;
          border: 3px solid black;
          position: absolute;
          top: 25%;
          left: 10%;

          /* 背景图设置 */                            
          background-image: url('src/assets/state.jpg'); /* 替换为你的图片路径 */
          background-size: cover; /* 覆盖整个容器 */
          background-position: center; /* 居中显示 */
          background-repeat: no-repeat; /* 禁止重复 */
        }
        .Bottom{
          display: flex;
          margin-top: 6vh;
          width: 100%;
          height: 10%;
          border: 3px solid rgb(129, 29, 29);
        }.setup{
          width: 10%;
          height: 100%;
          background-image: url('src/assets/setup.png');
          background-repeat: no-repeat;
          background-size: contain;
          border: 3px solid white;
        }.backpack{
          width: 10%;
          height: 100%;
          background-image: url('src/assets/beibao.png');
          background-size: contain;
          background-repeat: no-repeat;
          border: 3px solid white;
        }.email{
          width: 10%;
          height: 100%;
          background-image: url('src/assets/email.png');
          background-repeat: no-repeat;
          background-size: contain;
          border: 3px solid white;
        }.shop{
          width: 10%;
          height: 100%;
          background-image: url('src/assets/shop.png');
          background-repeat: no-repeat;
          background-size: contain;
          border: 3px solid white;
        }
    </style>